<template>
  <div>
    <ul class="biaotou">
      <li class="biaotou-li" v-for="item in biao" :key="item.id">{{item.text}}</li>
    </ul>
    <ul class="Ord-list">
      <li v-for="item in biaoList" :key="item.id">
        <span>{{item.num}}</span>
        <span>{{item.name}}</span>
        <span>{{item.ourse}}</span>
        <span>{{item.amount}}</span>
        <span>{{item.status}}</span>
        <span>{{item.time}}</span>
        <span>
          <router-link :to="'/place/'+item.id"  class="rot">{{item.operation[0]}}</router-link>
          <p>
            <el-button
              style="padding:0;color:#9137f3;"
              type="text"
              @click="open"
            >{{item.operation[1]}}</el-button>
          </p>
        </span>
      </li>
    </ul>
    <!--  -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>取消订单</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      value: true,
      biao: [
        { id: 1, text: "订单编号" },
        { id: 2, text: "课程名称" },
        { id: 3, text: "课程编号" },
        { id: 4, text: "订单金额" },
        { id: 5, text: "订单状态" },
        { id: 6, text: "提交时间" },
        { id: 7, text: "操作" },
      ],
      biaoList: [
        {
          id: 1,
          num: "2500",
          name: "幼儿英语入门课程",
          ourse: "2500256",
          amount: "2500.00",
          status: "待支付",
          time: "2019-01-25 10:55",
          operation: ["查看订单", "取消订单"],
        },
        {
          id: 2,
          num: "2501",
          name: "幼儿英语入门课程",
          ourse: "2500256",
          amount: "2500.00",
          status: "待支付",
          time: "2019-01-25 10:55",
          operation: ["查看订单", "取消订单"],
        },
      ],
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    open() {
      this.$confirm("删除后无法恢复，确定删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      });
    },
  },
};
</script>
<style scoped>
.biaotou {
  border-width: 0px;
  top: 460px;
  width: 1000px;
  height: 40px;
  font-family: "思源黑体 Bold", "思源黑体 Regular", "思源黑体";
  font-weight: 700;
  font-style: normal;
  color: #ffffff;
  list-style: none;
}
.biaotou-li {
  float: left;
  width: 130px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: inherit;
  background-color: rgba(145, 55, 243, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(242, 242, 242, 1);
  border-left: 0px;
  border-top: 0px;
  border-right: 0px;
  border-radius: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
.biaotou-li:nth-child(5) {
  width: 100px;
}
.biaotou-li:nth-child(7) {
  width: 240px;
}
.Ord-list {
  border-width: 0px;
  top: 500px;
  height: 50px;
  font-family: "思源黑体";
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
}
.Ord-list li {
  display: block;
  position: relative;
  left: 0px;
  top: 0px;
  list-style: none;
}
.Ord-list li span {
  display: block;
  float: left;
  list-style: none;
  text-align: center;
  width: 130px;
  height: 40px;
  line-height: 40px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(242, 242, 242, 1);
  border-top: 0px;
  border-radius: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  box-shadow: none;
  font-family: "思源黑体 Bold", "思源黑体 Regular", "思源黑体";
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  color: #999999;
}
.Ord-list li span:nth-child(5) {
  width: 100px;
}
.Ord-list li span:nth-child(7) {
  width: 240px;
}
.rot {
  float: left;
  margin-left: 50px;
  color: #9137f3;
  text-decoration: none;
}
</style>